<template>
  <!-- 方式1-父子通信 -->
  <!-- 父到子通过v-bind传数据,子组件通过props来接收 -->
  <!-- 子到父,通过$emit发消息,父组件通过v-on进行监听 -->
  <!-- 通过$emit可以传数据,父组件通过$event来接收 -->

  <!-- 方式2-父子通信 -->
  <!-- 父组件通过ref得到子组件实例,可以直接调用子组件的方法,数据 -->

  <!-- 方式3-兄弟通信 -->
  <!-- 通过事件总线,newVue,$on监听消息,$emit发送消息 -->
  <!-- 通过vuex,状态管理器 -->
  <div>
    回顾组件通信
    <!-- <Son
      ref="sonRef"
      :count="num"
      @add="num++"
      @addN="num+=$event"
    /> -->

    <!-- 语法糖v-model,用于简化父子通信 -->
    <!-- v-model="num"等效于:value="num" @input="num=
    $event" -->
    <Son ref="sonRef" v-model="num" />
    <!-- 引入兄弟组件 -->
    <jack />
    <beta />
    <!-- 方法模块user里面的state -->
    <div>token={{ $store.state.user.token }}</div>
    <button @click="setToken">setToken</button>
  </div>
</template>

<script>
import Beta from './components/Beta.vue'
import Jack from './components/Jack.vue'// 引入兄弟组件
import Son from './components/Son.vue'

export default {
  components: {
    Son,
    Jack,
    Beta
  },
  data() {
    return {
      num: 0
    }
  },
  mounted() {
    this.$refs.sonRef.focusFn()
  },
  methods: {
    setToken() {
      // 方式1：调用模块中的mutations
      this.$store.commit('user/setToken', '123')
    }
  }
}
</script>

<style>

</style>
